<template>
  <div class="consultation-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="$emit('load')"
      >
        <div v-for="item in list" :key="item.id" class="consultation-card">
          <div class="card-header">
            <div class="patient-info">
              <span class="name">{{ item.patientName }}</span>
              <span class="age">{{ item.age }}岁</span>
              <span class="gender">{{ item.gender === 1 ? '男' : '女' }}</span>
            </div>
            <van-tag :type="getStatusType(item.status)">
              {{ getStatusText(item.status) }}
            </van-tag>
          </div>
          
          <div class="card-content">
            <div class="description">{{ item.description }}</div>
            <div class="time">{{ formatTime(item.createTime) }}</div>
          </div>
          
          <div class="card-footer">
            <template v-if="item.status === 0">
              <van-button 
                plain 
                type="danger" 
                size="small"
                @click="$emit('reject', item.id)"
              >
                拒绝
              </van-button>
              <van-button 
                type="primary" 
                size="small"
                @click="$emit('accept', item.id)"
              >
                接诊
              </van-button>
            </template>
            
            <template v-else-if="item.status === 1">
              <van-button 
                plain 
                type="primary" 
                size="small"
                @click="$emit('end', item.id)"
              >
                结束问诊
              </van-button>
              <van-button 
                type="primary" 
                size="small"
                @click="$emit('continue', item.id)"
              >
                继续问诊
              </van-button>
            </template>
            
            <template v-else>
              <van-button 
                plain 
                type="primary" 
                size="small"
                @click="$emit('view', item.id)"
              >
                查看详情
              </van-button>
            </template>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { formatTime } from '@/utils/date'

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  loading: Boolean,
  finished: Boolean
})

const refreshing = ref(false)

const emit = defineEmits(['load', 'accept', 'reject', 'continue', 'end', 'view'])

const onRefresh = () => {
  refreshing.value = false
  emit('load')
}

const getStatusType = (status) => {
  const types = {
    0: 'warning',
    1: 'primary',
    2: 'success',
    3: 'danger'
  }
  return types[status] || 'default'
}

const getStatusText = (status) => {
  const texts = {
    0: '待接诊',
    1: '问诊中',
    2: '已完成',
    3: '已取消'
  }
  return texts[status] || '未知'
}
</script>

<style lang="scss" scoped>
.consultation-list {
  padding: 16px;
  
  .consultation-card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      
      .patient-info {
        .name {
          font-size: 16px;
          font-weight: 500;
          margin-right: 8px;
        }
        
        .age, .gender {
          font-size: 14px;
          color: $text-color-secondary;
          margin-right: 8px;
        }
      }
    }
    
    .card-content {
      .description {
        font-size: 14px;
        color: $text-color;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      
      .time {
        font-size: 12px;
        color: $text-color-secondary;
      }
    }
    
    .card-footer {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid $border-color;
    }
  }
}
</style> 